<template>
  <div class="login-container">
    <el-form ref="userForm" :model="user" :rules="rules" class="login_form">
       <el-form-item class="logo">
          <img src="./images/logo_index.png">
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code" placeholder="验证码"></el-input>
      </el-form-item>
      <el-form-item prop="checked">
        <el-checkbox v-model="user.checked">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loginLoading" class="login_btn" @click="onLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login } from '@/api'
import { setToken } from '@/utils/token.js'
export default {
  name: 'LoginCom',
  data() {
    /*
      校验通过 callback()
      校验失败 callback(new Error('错误的信息'))
    */
    const validatePass = (rule, value, callback) => {
      // console.log(rule, value, callback)
      // value 是判断复选框是否勾上了,布尔值类型
      if (value) {
        return callback()
      } else {
        return callback(new Error('请勾选同意用户协议'))
      }
    }
    return {
      user: {
        mobile: '13922222222', // 手机号
        code: '246810', // 验证码
        checked: true // 用户协议标识,这个字段放到这里主要是方便写规则,一起发给服务器也没事
      },
      loginLoading: false, // 登录loading图标标识
      rules: { // 表单字段验证规则
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '验证码格式不正确', trigger: 'blur' }
        ],
        checked: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /*
      配置 Form 表单验证:
      1 必须给 el-from 组件绑定 model 为表单数据对象
      2 给需要验证的表单项 el-form-item 绑定 prop 属性
        注意: prop 属性需要指定表单对象中的数据名称
      3 通过 el-from 组件的 rules 属性配置验证规则 */

    // 登录校验方法
    onLogin() {
      this.$refs.userForm.validate((valid) => { // 手动调用一次校验方法得到校验结果
        if (valid) {
          this.loginFn()
        }
      })
    },
    // 登录的方法
    async loginFn() {
      this.loginLoading = true
      try {
        const res = await login({
          data: this.user
        })
        this.$message({
          type: 'success',
          message: '登陆成功'
        })
        console.log(res,'登录')
        // 存储登录成功的token
        if(res.data.token){
            setToken('user',res.data)
        }
        // 跳转到首页
        this.$router.replace({
          // 先进行判断是否是因为登录过期而进行跳转.否则跳到首页
          path: this.$route.query.path || '/layout'
        })
      } catch (e) {
        this.$message({
          type: 'error',
          message: e.response.data.message || e
        })
      } finally {
        // 无论登录是否成功 登录旋转图标停止
        this.loginLoading = false
      }
    }
  },
  computed: {},
  components: {}
}

</script>

<style scoped lang="less">
.login-container{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('images/login_bg.jpg') no-repeat;
  background-size: cover;
   .login_form {
     .logo{
       text-align: center;
       img{
         width: 150px;
       }
     }
     min-width: 350px;
     background-color: #fff;
     padding: 30px;
     .login_btn{
       width: 100%;
     }
  }
}

</style>
